//新增通知
import React, { useState } from 'react';
import 'moment/locale/zh-cn'
import useStore from '../../../components/useStore';
import { Button, Input, notification } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import store from '../../../untils/store';
import request from '../../../untils/request';

const AddNoticeForm = () => {//新增通知页面

    const { collapsed } = useStore()
    const {user}=store()
    const [notice,setnotice]=useState({
        title:"",
        content:""
    })

    const getTitle=async (e)=>{
        setnotice({
            ...notice,
            title:e.target.value
        })
    }

    const getContent=async (e)=>{
        setnotice({
            ...notice,
            content:e.target.value
        })
    }

    const submit=async ()=>{
        if(notice.title.length<3||notice.content.length<10){
            notification.open({
                message:"标题/内容过短"
            })
            return
        }
        request("/admin/notice/publishNotice", {
            method: 'POST',
            mode: 'cors',
            body:{
                notice:notice
            }
        }).then(data => {
            notification.open({
                message:data.msg
            })
        })
    }

    return (
        <div style={{    height: "94%", backgroundColor: `#F1F1F1`,right:"1%",top:"4vh",overflow:"hidden",
        backgroundSize: "100% 100%", width: collapsed?"94%":"84%", position: "absolute",  color: "white", fontSize: "0.8rem"}}>
            <div style={styles.kshcontainer}>
                <div style={{
                    fontSize: "0.7rem", position: "relative", width: "96%", marginLeft: "2%", backgroundColor: "", display: "flex",
                    textIndent: "1rem", justifyContent: "flex-start", alignContent: "flex-start", flexWrap: "wrap"
                }}>
                    标题：<Input onChange={getTitle} value={notice.title} maxLength={50} showCount/>
                    内容：<TextArea onChange={getContent} value={notice.content} maxLength={1000} style={{maxHeight:"70vh",minHeight:"50vh",width:"100%"}}/>
                    <Button onClick={submit}>发布</Button>
                </div>
            </div>
        </div>
    )
}

export default AddNoticeForm

var styles = {
    maincontainer: {
        height: "100vh", 
        backgroundColor: `white`,
        backgroundSize: "100% 100%", 
        width: "100%", 
        position: "absolute",
        color: "white", 
        fontSize: "0.8rem"
    },
    topcontainer: {
        width: "100%", 
        height: "10vw", 
        backgroundImage: "linear-gradient(to bottom,#e4e5eb , white)", 
        paddingTop: "3vw",
        position: "relative", 
        fontSize: "0.89rem", 
        textIndent: "2rem", 
        fontWeight: "800", 
        color: "#a91f24", 
        borderRadius: "0 0 15px 15px"
    },
    butdcstyle: { paddingLeft:"1vw",
        paddingRight:"1vw",height: "2vw", 
        position: "absolute", 
        right: "1%",
        backgroundColor: "#a91f24", 
        fontSize: "0.8vw", 
        borderRadius: "0.4rem", 
        borderRadius: "0 0 0.3vw 0.3vw" 
    },
    butmainstyle: {
        paddingLeft:"1vw", 
        height: "2vw", 
        position: "absolute", 
        right: "6.5%",
        backgroundColor: "#a91f24", 
        fontSize: "0.8vw", 
        borderRadius: "0.4rem", 
        borderRadius: "0 0 0.3vw 0.3vw" 
    },
    butbackstyle: { 
        borderRadius: "0.4rem", 
        backgroundColor: "#a91f24", 
        height: "2vw", 
        position: "absolute", 
        right: "12%",
        fontSize: "0.8vw", 
        borderRadius: "0 0 0.3vw 0.3vw"
    },
    kshcontainer: {
        width: "98%", 
        height: "95%", 
        position: "absolute", top: "3%", 
        left: "1%", backgroundColor: "white", 
        color: "black",
        borderRadius: "10px",
    },
}